<template>
	<view>
		<scroll-view scroll-y="true" :style="{ height: mainHeight, paddingBottom: '90rpx' }">
			<view class="billCard">
				<view class="top">
					<view class="name flexjsbac">
						<view class="flexJcac">
							<text class="time">{{ orderList.storeString }}</text>
						</view>
						<text class="status-time">{{ orderList.time }}</text>
					</view>
					<view class="">
						<text>订单号:{{ orderList.orderId }}</text>
					</view>
				</view>
				<view class="bottom">
					<view class="title flexjsbac">
						<text>{{ orderList.itemName }}</text>
					</view>
					<view class="" @click.stop="callPhone(orderList.userPhoneNumber)">
						<text style="margin-right: 10rpx;">{{ orderList.userName }}</text>
						<text>{{ orderList.userPhoneNumber }} </text>
						<uni-icons type="phone-filled" size="20" color="#19de6b"></uni-icons>
					</view>
					<view class="">
						<text>订单来源:{{ orderList.orderSource === 1 ? '小程序' :orderList.orderSource === 2 ? '管理端' : '技师端' }}</text>
					</view>
				</view>
				<!-- 	<view class="bottom" v-if="orderList.zyOrderProductList.length > 0">
					<view v-for="(item, index) in orderList.zyOrderProductList" :key="index">
						<view class="">
							<text>附加商品:{{ item.productName }}</text>
						</view>
						<view class="">
							<text>服务次数:{{ item.productNum }}</text>
						</view>
					</view>
				</view> -->
				<view class="bottom">
					<view class="">
						<text>服务开始时间:{{ orderList.subscribeStartTime }}</text>
					</view>
					<view class="">
						<text>服务结束时间:{{ orderList.subscribeEndTime }}</text>
					</view>
				</view>
				<view class="bottom">
					<view class="">
						<text>支付方式:{{ paymentType[orderList.paymentType] }}</text>
					</view>
					<view class="">
						<text>实付金额:{{ orderList.paymentMoney }}</text>
					</view>
					<view class="">
						<text>支付时间:{{ orderList.paymentTime ? orderList.paymentTime : '未支付' }}</text>
					</view>
				</view>
				<view class="bottom" v-if="type === 5">
					<view class="">
						<text>退单详情:{{ orderList.remark }}</text>
					</view>
					<view class="">
						<text>退单时间:{{ orderList.updateTime }}</text>
					</view>
				</view>
			</view>
			<view class="billCard" v-if="type === 4">
				<!-- <evaluate /> -->
				<view class="evaluate" v-if="evaluate&&evaluate.zyTechnicianEvaluateItemVos">
					<view class="detail flexjsbac">
						<text>评价详情</text>
						<!-- <view class="flexJcac">
							<text>{{ evaluate.averageScore }}</text>
							<uni-icons type="star-filled" size="20" color="#FFCC5E"></uni-icons>
						</view> -->
					</view>
					<view class="flex space_between" v-for="(item,index) in evaluate.zyTechnicianEvaluateItemVos"
						:key="item.id">
						<text>{{item.issue}}：</text>
						<!-- <jp-rate v-model="evaluate.satisfaction"></jp-rate>	 -->
						<uni-rate v-model="item.score" :disabled="true" disabledColor='#ffca3e' />
					</view>
					<!-- <view class="flex align-center" >
						<text>满意程度：</text>
						// <jp-rate v-model="evaluate.satisfaction"></jp-rate>	
						<uni-rate v-model="evaluate.satisfaction" :disabled="true" disabledColor='#ffca3e' />
					</view>
					<view class="flex align-center">
						<text>服务质量：</text>
						<jp-rate v-model="evaluate.profession"></jp-rate>	
						<uni-rate v-model="evaluate.profession" :disabled="true" disabledColor='#ffca3e' />
					</view>
					<view class="flex align-center">
						<text>服务热情：</text>
						<jp-rate v-model="evaluate.enthusiasm"></jp-rate>	
						<uni-rate v-model="evaluate.enthusiasm" :disabled="true" disabledColor='#ffca3e' />
					</view>
					<view class="flex align-center">
						<text>综合评分：</text>
						<jp-rate v-model="evaluate.averageScore"></jp-rate>	
						<uni-rate v-model="evaluate.averageScore" :disabled="true" disabledColor='#ffca3e' />
					</view> -->
					<view class="">
						<text>{{ evaluate.evaluateText }}</text>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import YouPopup from "@/components/you-popup/index.vue"
	import NavBar from "@/components/nav-bar";
	import tabList from '@/components/tabList/index'
	import evaluate from './evaluate.vue'
	import chargeback from '@/subPages/order/chargeBack.vue'
	import {
		getOrderDetail,
		upClock,
		getCommentDetail,
		technicianEvaluate
	} from "@/api/system/home"
	export default {
		name: "index",
		components: {
			NavBar,
			tabList,
			YouPopup,
			evaluate,
			chargeback
		},
		data() {
			return {
				value22: 1,
				orderList: {},
				shopVisible: false,
				orderId: '',
				evaluate: {},
				paymentType: {
					1: '微信',
					2: '支付宝',
					3: '现金',
					4: '银行卡',
					5: '店铺储蓄卡',
					6: '其他'
				},
				evaluatePoint: 4.8,
				rateValue: 4,
				rate: 1,
				bottomButton: {
					1: {
						bottomName: '上钟'
					},
					2: {
						bottomName: '下钟'
					},
				},
				type: 0
			};
		},
		created() {
			this.mainHeight = this.$store.getters.heightData.noTabMainHeight + 'px'
		},
		onLoad(options) {
			this.getDetail(options.id)
			this.orderId = options.id
			this.getTechnicianEvaluate(options.zyTechnicianEvaluateId)
		},
		methods: {
			//打电话
			callPhone(number) {
				uni.makePhoneCall({
					phoneNumber: number, // 替换为您要拨打的电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function(err) {
						console.error('拨打电话失败：' + JSON.stringify(err));
					}
				});
			},
			getDetail(id) {
				getOrderDetail(id).then((res) => {
					this.orderList = res.data
					this.type = res.data.status
					if (this.type === 4) {
						this.getCommentDetail()
					}
				})
			},
			//获取订单评价
			getTechnicianEvaluate(id) {
				if (!id) return
				technicianEvaluate(id).then(res => {
					this.evaluate = res.data
				})
			},
			getCommentDetail() {
				// getCommentDetail(this.orderId).then((res) => {
				// 	this.evaluate = res.data
				// })
			},
			makePhone() {
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
			},
			popupClick() {
				if (this.type === 1 || this.type === 2) {
					this.shopVisible = true
				}
			},
			confirm() {
				const params = {
					id: this.orderList.id,
				}
				if (this.type === 1) {
					params.status = 2
				}
				if (this.type === 2) {
					params.status = 3
				}
				upClock(params).then((res) => {
					if (res.code === 200) {
						this.$refs.uToast.show({
							message: this.type === 1 ? '上钟成功' : '下钟成功'
						})
						this.shopVisible = false
						uni.redirectTo({
							url: '/pages/index',
						})
						// this.$emit('confirm');
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.btnwh {
		width: 162rpx;
		height: 68rpx;
	}

	.billCard {
		background: #FFFFFF;
		border-radius: 17rpx 17rpx 17rpx 17rpx;
		opacity: 1;
		margin: 37rpx 37rpx 37rpx 37rpx;

		.top {
			padding: 30rpx 30rpx 30rpx 30rpx;
			border-bottom: 1rpx solid #E6E6E6;

			.name {
				font-size: 44rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 20rpx;

				.status {
					width: 58rpx;
					height: 53rpx;
					color: #FFFFFF;
					font-size: 36rpx;
					background-color: #FF0000;
					border-radius: 17rpx;
					margin-right: 15rpx;
				}

				.time {
					font-size: 44rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					line-height: 35rpx;
				}

				.status-time {
					font-size: 30rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					color: #FF0000;

				}
			}
		}

		.bottom {
			padding: 15rpx 30rpx 30rpx 30rpx;
			border-bottom: 1px solid #E6E6E6;

			>view {
				line-height: 52rpx;
			}

			.title {
				font-size: 44rpx;
				font-weight: 500;
				color: #333333;
				line-height: 52rpx;

				.money {
					font-size: 52rpx;
					font-family: DIN, DIN;
					font-weight: bold;
					color: #FE4D4F;
					line-height: 60rpx;
				}
			}
		}

		.evaluate {
			padding: 37rpx;

			.detail {
				height: 68rpx;
				font-size: 45rpx;
				font-weight: 500;
				color: #333333;
				line-height: 53rpx;
				// >text:nth-child(1){

				// }
			}
		}
	}

	.bottom_btn {
		position: fixed;
		width: 100%;
		bottom: 0rpx;
		height: 148rpx;
		background: #fff;
		box-shadow: 0rpx -2rpx 13rpx 0rpx rgba(173, 173, 173, 0.25);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;

		.btn {
			// width: 225rpx;
			width: calc(100% - 80rpx);
			margin: 0 40rpx;
			height: 84rpx;
			color: #fff;
			background-color: #C27E15;
		}
	}

	.switchx {
		.hader {
			line-height: 80rpx;
			font-weight: 700;
		}

		.pan {
			padding: 0 20rpx;
		}

		.rate {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			line-height: 30px;
			color: #666;
			padding: 15rpx 0;
		}

		.item {
			padding: 10rpx;
		}
	}

	.space_between {
		justify-content: space-between;
	}
</style>